<template>
  <div class="content-div">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div class="banner-box">
        <div class="banner-bg"></div>
        <div class="banner-head">
          <div class="location-box" @click="$router.push('/city')">
            <span>{{$store.state.app.city.city_name}}</span>
            <img src="@/assets/images/icon-down.png" alt="" srcset="">
          </div>
          <div class="search-box" @click="$router.push('/search')">
            <van-icon name="search" />
            <span>点击搜索陪诊服务/医院/陪诊师</span>
          </div>
        </div>
        <van-swipe class="my-swipe" :autoplay="4000" :show-indicators="false">
          <van-swipe-item v-for="(item, index) in bannerList" :key="index">
            <img :src="item.picture" alt="" srcset="">
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="list-outbox">
        <div class="list-tab-box">
          <!-- <div class="tab-item-box" @click="changeTab('2')" :class="{'active-tab' : active_tab == '2'}">报价</div> -->
          <div class="tab-item-box" @click="changeTab('1')" :class="{'active-tab' : active_tab == '1'}">一口价</div>
        </div>
        <div class="list-search-box">
          <!-- <van-dropdown-menu active-color="#1989fa" v-if="active_tab == '2' || active_tab == '3'">
            <van-dropdown-item v-model="data.item" :options="optionItem" />
          </van-dropdown-menu>
          <van-dropdown-menu active-color="#1989fa" v-if="active_tab == '2'">
            <van-dropdown-item v-model="data.money" :options="optionMoney" />
          </van-dropdown-menu> -->
        </div>
        <div class="list-box">
          <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <div v-if="active_tab == '1'">
              <div @click="toPage('/order-detail-waiter', {order_goods_id: item.order_goods_id})" class="list-item-box1" v-for="(item, index) in list" :key="index">
                <div class="list-head-box">
                  <div class="list-name-box">
                    <span class="list-name" style="float:left;">{{item.give_service_name}}</span>
                    <span class="list-type" style="float:right;">{{item.hospital_name}}</span>
                  </div>
                  <div class="list-content-box">
                    <div class="flex">
                      <span>{{item.visitor_name}}  </span>
                      <img v-if="item.visitor_sex == '1'" class="sex-img" src="@/assets/images/男.png" alt="" srcset="">
                      <img v-if="item.visitor_sex == '2'" class="sex-img" src="@/assets/images/女.png" alt="" srcset="">
                      <span>{{item.visitor_age}}岁</span>
                    </div>
                  </div>
                  <div class="list-content-box">
                    <span>{{item.visitor_tel}}</span>
                  </div>
                  <div class="list-btn-box">
                    <div style="color: #999;font-size:12px;">期望就诊时间：{{item.expectedTime}}</div>
                    <div class="list-btn">抢单:¥{{item.payable_amount.toFixed(2)}}</div>
                  </div>
                </div>
              </div>
            </div>
            <div v-else>
              <div @click="toPage('/waiterDetail', {id: item.accompanying_physician_id})" class="list-item-box2" v-for="(item, index) in list" :key="index">
                <div class="list-head-box">
                  <img :src="item.head_sculpture" alt="" srcset="">
                  <div class="list-name-box">
                    <span class="list-name">{{item.name}}</span>
                    <div class="list-zz">
                      <span v-if="item.isCard != '0'" style="background-color: rgba(89,89,255,.07);color: #1989fa;">{{ active_tab == '2' ? '身份认证' : '陪诊机构'}}</span>
                      <span v-if="item.isQualification != '0'" style="background-color: rgba(234,135,68,.07);color: #ea8744;">{{ active_tab == '2' ? '资格证书' : '机构认证'}}</span>
                    </div>
                    <span class="list-name1">陪诊医院:{{item.hospitalName}}</span>
                    <span class="list-name1">陪诊项目:{{item.giveServiceName}}</span>
                  </div>
                </div>
                <div class="list-addr-box">
                  <div>
                    <span>陪诊次数：</span>
                    <span class="value-text">{{item.goodsNumbers}}</span>
                    <span>次</span>
                  </div>
                  <div>
                    <span>陪诊价格：</span>
                    <span class="value-text">{{item.give_service_price}}</span>
                    <span>元起</span>
                  </div>
                </div>
              </div>
            </div>
          </van-list>
        </div>
      </div>
    </van-pull-refresh>
  </div>
</template>
<script>
import { Toast, Dialog } from 'vant'
import { selectGiveServiceCityList, findRotationChartList } from '@/api/medical.js'
import { findAccompanyingOrderList, selectAccompanyingPhysician } from '@/api/medicalWaiter.js'
export default {
  name: 'index',
  data () {
    return {
      loading: false,
      finished: false,
      list: [],
      active_tab: '1',
      isLoading: false,
      bannerList: [
        { id: '1', img: 'https://hqpz.tanjirj.com/uploads/images/20221008/cee464c792fad1951644efcabf2fb264.png' },
        { id: '1', img: 'https://hqpz.tanjirj.com/uploads/images/20221008/cee464c792fad1951644efcabf2fb264.png' }
      ],
      moduleList: [
        { id: '1', text: '诊前预约', img: require('@/assets/images/icon-zqyy.png'), type: '1' },
        { id: '1', text: '代办问诊', img: require('@/assets/images/icon-dbwz.png'), type: '2' },
        { id: '1', text: '代办买药', img: require('@/assets/images/icon-dbmy.png'), type: '3' },
        { id: '1', text: '送取结果', img: require('@/assets/images/icon-sqjg.png'), type: '4' },
        { id: '1', text: '就医陪诊', img: require('@/assets/images/icon-jypz.png'), type: '5' }
      ],
      optionItem: [
        { text: '全部项目', value: 0 },
        { text: '诊前预约', value: 1 },
        { text: '代办问诊', value: 2 },
        { text: '代办买药', value: 3 },
        { text: '送取结果', value: 4 },
        { text: '就医陪诊', value: 5 }
      ],
      optionMoney: [
        { text: '价格', value: 0 },
        { text: '价格由低到高', value: 1 },
        { text: '价格由高到低', value: 2 }
      ],
      data: {
        level: 0,
        item: 0,
        money: 0
      },
      serviceList: [],
      accompanying_physician_id: ''
    }
  },
  created () {},
  methods: {
    toServicePage (path, query, name) {
      let isGo = false
      this.serviceList.forEach(item => {
        if (item.give_service_name === name) {
          isGo = true
        }
      })
      if (!isGo) {
        Toast.fail('暂无此服务')
        return false
      }
      this.$router.push({
        path,
        query
      })
    },
    toPage (path, query) {
      this.$router.push({
        path,
        query
      })
    },
    onLoad () {
      // let apiFun = this.active_tab === '1' ? selectHospitalList : selectAccompanyingPhysicianList
      findAccompanyingOrderList({
        accompanying_physician_id: this.$store.state.user.severUserInfo.accompanying_physician_id,
        province: this.$store.state.app.city.province_code,
        city: this.$store.state.app.city.city_code,
        type: this.active_tab,
        state: '2'
      }).then(res => {
        if (res.data.errcode === 0) {
          this.list = res.data.data
          this.loading = false
          this.finished = true
        }
      })
    },
    changeTab (type) {
      this.active_tab = type
      this.clearParam(type)
    },
    getLocCity () {
      this.$store.dispatch('setCity', { city_name: '沈阳市', city_code: '210100', province_name: '辽宁省', province_code: '210000' })
      // AMap.plugin('AMap.CitySearch', () => {
      //   var citySearch = new AMap.CitySearch()
      //   citySearch.getLocalCity((status, result) => {
      //     if (status === 'complete' && result.info === 'OK') {
      //       this.$store.dispatch('setCity', result.city)
      //     }
      //   })
      // })
    },
    clearParam (tab_type) {
      this.list = []
      this.active_tab = tab_type
      this.data = {
        level: 0,
        item: 0,
        money: 0
      }
      this.loading = true
      this.finished = false
      this.onLoad()
    },
    onRefresh () {
      setTimeout(() => {
        Toast('刷新成功')
        this.clearParam('1')
        this.isLoading = false
      }, 1000)
    },
    async getService () {
      selectGiveServiceCityList({
        province: this.$store.state.app.city.province_code,
        city: this.$store.state.app.city.city_code
      }).then(res => {
        if (res.data.errcode === 0) {
          this.serviceList = res.data.data
        }
      })
    },
    getBanner () {
      findRotationChartList({
        province: this.$store.state.app.city.province_code,
        city: this.$store.state.app.city.city_code,
        client_type: '3'
      }).then(res => {
        if (res.data.errcode === 0) {
          this.bannerList = res.data.data
        }
      })
    },
    async getAccompanyingPhysicianState () {
      selectAccompanyingPhysician({ accompanying_physician_id: this.accompanying_physician_id }).then(res => {
        if (res.data.errcode === 0) {
          this.physicianInfo = res.data.data
          if (this.physicianInfo.is_qualification === 0 && this.physicianInfo.state === '3') { // 未认证
            Dialog.confirm({
              title: '提示！',
              message: '您的认证被驳回，请重新进行陪诊师认证、服务设置和资料补全！'
            }).then(() => {
              this.$router.push({
                name: 'mine-waiter'
              })
            })
          } else if (this.physicianInfo.is_qualification === 0) {
            Dialog.confirm({
              title: '提示！',
              message: '请进行陪诊师认证和资料补全，若已上传请等待审核！'
            }).then(() => {
              this.$router.push({
                name: 'mine-waiter'
              })
            })
          }
          return
        }
        Toast.fail(res.data.errmsg)
      })
    },
    async getInfo () {
      await getAccompanyingPhysicianState()
      await onLoad()
    }
  },
  mounted () {
    this.accompanying_physician_id = this.$store.state.user.severUserInfo.accompanying_physician_id
    this.getAccompanyingPhysicianState()
    if (!this.$store.state.app.city.city_name) {
      this.getLocCity()
    }
    this.getService()
    this.getBanner()
    console.log(this.$store)
  }
}
</script>

<style scoped lang="less">
  .content-div{
    font-size: 12px;
    background-color: #f8f8f8;
    min-height: 100%;
    .banner-box{
      width: 100%;
      height: 206px;
      position: relative;
      .banner-bg{
        width: 120%;
        height: 100%;
        position: absolute;
        z-index: 0;
        left: -10%;
        background-color: #1989fa;
        border-radius: 0 0 50% 50%;
      }
      .banner-head{
        color: #FFFFFF;
        font-size: 12px;
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        padding: 10px;
        .location-box{
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          padding-right: 10px;
          img{
            width: 12px;
            height: 12px;
            margin-left: 2px;
          }
        }
        .search-box{
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;
          padding: 0 10px;
          box-sizing: border-box;
          background-color: #FFFFFF;
          color: #666666;
          border-radius: 17px;
          // height: 34px;
          height: 30px; // 2024-01-02 修改为30px
          flex: 1;
          span{
            padding-left: 10px;
          }
        }
      }
      .my-swipe{
        width: 300px;
        margin-left: 10px;
        height: 150px;
        border-radius: 6px;
        .van-swipe-item {
          width: 100%;
          img{
            width: 100%;
            height: 100%;
            vertical-align: middle;
          }
        }
      }
    }
    .module-box{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      width: 300px;
      margin-left: 10px;
      padding-top: 10px;
      .item-box{
        font-size: 12px;
        color: #000000;
        display: flex;
        flex-direction: column;
        align-items: center;
        img{
          width: 38px;
          height: 38px;
          margin-bottom: 6px;
        }
      }
    }
    .module2-box{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      width: 300px;
      margin-left: 10px;
      padding-top: 14px;
      img{
        width: calc((100% - 10px) / 2);
      }
    }
    .list-outbox{
      margin-top: 14px;
      width: 304px;
      margin-left: 8px;
      border-radius: 10px;
      background-color: #FFFFFF;
      margin-bottom: 10px;
      .list-tab-box{
        height: 30px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        border-radius: 10px 10px 0 0;
        background: linear-gradient(180deg, #B8DBFE, hsla(0,0%,100%,0));
        .tab-item-box{
          min-width: 60px;
          text-align: center;
          height: 100%;
          line-height: 30px;
          font-size: 12px;
        }
        .active-tab{
          background-color: #1989fa;
          border-radius: 10px 0 10px 0;
          color: #FFFFFF;
        }
      }
      .list-search-box{
        padding: 10px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        font-size: 12px;
        /deep/ .van-dropdown-menu__bar{
          background-color: unset;
          box-shadow: unset;
          height: unset;
        }
        /deep/ .van-dropdown-menu__title{
          padding: 0 10px 0 0;
        }
        /deep/ .van-dropdown-menu{
          margin-right: 20px;
        }
        /deep/ .van-dropdown-menu__title::after{
          right: -.1rem;
        }
      }
      .list-box{
        box-sizing: border-box;
        padding: 0px 8px 8px;
        font-size: 12px;
        .list-item-box1{
          margin-bottom: 10px;
          border-radius: 5px;
          border: 1px solid #eeeeee;
          box-sizing: border-box;
          padding: 11px 7px 10px 8px;
          box-shadow: 0px 0px 10px #eeeeee;
          .list-head-box{
            // display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: flex-start;
            padding-bottom: 6px;
            height: auto;
            .list-name-box{
              // display: flex;
              flex-direction: column;
              justify-content: space-around;
              align-items: flex-start;
              height: 28px;
              border-bottom: 1px solid #edeae6;
              width: 100%;
              .list-name{
                font-weight: bold;
                overflow: hidden;
                text-overflow: ellipsis;
                word-break: break-all;
                white-space: nowrap;
                // width: 100%;
              }
            }
            .list-content-box {
              height: 18px;
              padding-top: 7px;
              width: 100%;
              .item-name{
                margin-top: 7px;
                height: 18px;
                font-size: 10px;
                margin-bottom: 1px;
              }
            }
            .list-btn-box {
              height: 27px;
              line-height: 27px;
              display: flex;
              flex-direction: row;
              align-items: center;
              justify-content: space-between;
            }
            // img{
            //   width: 50px;
            //   height: 50px;
            //   margin-right: 10px;
            // }
            .list-btn {
              background: rgba(253, 72, 52, 0.07);
              color: rgb(253, 72, 52);
              border: 1px solid rgba(253, 72, 52, 0.45);
              width: 72px;
              height: 27px;
              border-radius: 5px;
              text-align: center;
              // margin-left: 2px;
              // justify-content: center;
            }
          }
          .list-addr-box{
            color: #1989fa;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            span{
              color: #999999;
              padding-left: 4px;
              display: inline-block;
              overflow: hidden;
              text-overflow: ellipsis;
              word-break: break-all;
              white-space: nowrap;
              width: calc(100% - 30px);
            }
          }
        }
        .list-item-box2{
          margin-bottom: 10px;
          border-radius: 5px;
          border: 1px solid #eeeeee;
          box-sizing: border-box;
          padding: 10px;
          box-shadow: 0px 0px 10px #eeeeee;
          .list-head-box{
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: flex-start;
            padding-bottom: 6px;
            height: 70px;
            .list-name-box{
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              align-items: flex-start;
              height: 100%;
              width: calc(100% - 80px);
              .list-zz{
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                align-items: center;
                span{
                  margin-top: 2px;
                  padding: 2px 6px;
                  font-size: 10px;
                  margin-right: 10px;
                  border-radius: 4px;
                }
              }
              .list-name{
                font-weight: bold;
                overflow: hidden;
                text-overflow: ellipsis;
                word-break: break-all;
                white-space: nowrap;
                width: 100%;
              }
              .list-name1{
                color: #AAAAAA;
                overflow: hidden;
                text-overflow: ellipsis;
                word-break: break-all;
                white-space: nowrap;
                width: 100%;
              }
            }
            img{
              width: 70px;
              height: 70px;
              margin-right: 10px;
            }
          }
          .list-addr-box{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            color: #999999;
            .value-text{
              color: #1989fa;
            }
          }
        }
      }
    }
    .flex {
      display: flex;
      flex-direction: row;
      align-items: center;
    }
    .row-center {
      justify-content: center;
    }
    .row-between {
      justify-content: space-between;
    }
    .sex-img {
      width: 18px;
      height: 18px;
      margin-left: 5px;
      margin-right: 2px;
    }
  }
</style>
